<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page import="net.tanesha.recaptcha.ReCaptcha" %>
<%@ page import="net.tanesha.recaptcha.ReCaptchaFactory" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html>    
    <head>        
        <title>Sign up for Rentpad</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="${model.props.appPath}/css/jquery_mobile/jquery.mobile-1.2.1.min.css" type="text/css"/>
        <script src="${model.props.appPath}/js/jquery/jquery-1.8.3.min.js"></script>
	<script src="${model.props.appPath}/js/jquery_mobile/jquery.mobile-1.2.1.min.js"></script>
                
        <style>
            a {color:#404042;text-decoration:none;}      /* unvisited link */
            @font-face
            {
                font-family: avant;
                src: url('${model.props.appPath}/fonts/avangmi-webfont.ttf');
            }
            body  * {
                font-family: avant !important;
            }
        </style>
        
        <script>
            function switchMenu() {
                if ($('#menu').is(':visible')) {                    
                    $("#menu").hide();
                } 
                else {
                    $("#menu").show();
                }
            }
        </script>
        
        <script type="text/javascript">  
            function validateEmail(email) { 
                var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                return re.test(email);
            } 
            function checkEmailExisting(email) {
                var existing = false;
                try {       
                    $.ajax({
                        type: 'POST',
                        url: "${model.props.appPath}/ws/invite.htm",
                        data: {
                            email: email,
                            a: 11000
                        },
                        timeout: 200000,
                        success: function(data) {
                            if (data.model.existing == 1) {
                                existing = true;
                            }
                        },
                        error : function(xhr, textStatus, errorThrown) { 
                            alert('error!');
                        }
                    });  
                }
                catch (e) {
                    alert(e);
                }
                return existing;
            }
            function submitInviteForm() {
                if (!$('#agree').is(":checked")) {
                    alert("Please check the checkbox to indicate that you agree to our terms & conditions and privacy statement.");
                    return;
                }
                
                var firstName = $("#text-invite-firstName").val();
                var lastName = $("#text-invite-lastName").val();
                var email = $("#text-invite-email").val();
                var password = $("#text-invite-password").val();
                var type = $("#text-invite-type").val();
                var area = $("#text-invite-area").val();
                                                
                if (firstName == 'Your first name') {
                    firstName = '';
                }
                if (lastName == 'Your last name') {
                    lastName = '';
                }
                if (email == 'Email address') {
                    email = '';
                }  
                if (password == 'And a password of your choice') {
                    password = '';
                }           
                if (password && password.length < 4) {
                    password = '';                    
                }
                
                try {
                    if (!firstName || !email) {
                        alert("Your name and email are required.");                        
                    }                     
                    if (!validateEmail(email)) {
                        alert("Please enter a valid email address.");  
                    }
                    else if (!password) {
                        alert("A password for your account is required to at least 4 characters long.");                        
                    }
                    else {                        
                        $.mobile.loading('show'); 
                        $.ajax({
                            type: 'POST',
                            url: "${model.props.appPath}/ws/invite.htm",
                            data: {
                                firstName: firstName,
                                lastName: lastName,
                                email: email,
                                password: password,
                                type: type,
                                area: area,
                                a: 3
                            },
                            timeout: 200000,
                            success: function(data) {
                                $.mobile.loading('hide'); 
                                
                                if (data.model.success) {
                                    alert("Success! We have recorded your details and will send you an email once your account is already active and ready to use. Have a great day!");
                                    $("#text-invite-firstName").val("");
                                    $("#text-invite-lastName").val("");
                                    $("#text-invite-email").val("");
                                    $("#text-invite-area").val("");
                                    $("#text-invite-type").val("");

                                    $("#text-invite-firstName").focusout();
                                    $("#text-invite-lastName").focusout();
                                    $("#text-invite-email").focusout();
                                    $("#text-invite-area").focusout();
                                    window.location="${model.props.appPath}/login.htm";
                                }    
                                else {
                                    alert("Oops! You did not enter the correct ReCaptcha code. Please try again.");
                                }
                                //$("#submit-recaptcha").removeAttr('disabled');
                            },
                            error : function(xhr, textStatus, errorThrown) {
                                
                                $.mobile.loading('hide'); 
                            }
                        });                        
                    }
                }
                catch (e) {
                    alert(e);
                }
            }            
        </script>
        
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
            ga('create', 'UA-44197833-1', 'rentpad.com.ph');
            ga('send', 'pageview');
        </script>
    </head>

    <body>

        <div data-role="page" data-theme="d">
            <%@include file="header_mobile.jsp" %>

            <div data-role="content">
                
                <div style="text-align: left; margin-left: 3px;">
                    <h2>Welcome to Rentpad!</h2>
                    <p>Post your condos, apartments, houses or rooms for rent, and get a worldwide exposure.</p>  
                    <p>Get an account, just fill out the form below. <b>Its free! seriously. ;)</b></p> 
                </div>
                
                <div style="background-color: #f1f1f1; padding: 10px;">
                    <form data-ajax="false" action="login.htm">	  

                        <div data-role="fieldcontain" style="border-bottom: 0px;">
                            <input id="text-invite-firstName" type="text" name="firstName" placeholder="First Name" style="width: 100%"  />
                        </div>    
                        <div data-role="fieldcontain" style="border-bottom: 0px;">
                            <input id="text-invite-lastName" type="text" name="lastName" placeholder="Last Name" style="width: 100%"   />
                        </div>  
                        <div data-role="fieldcontain" style="border-bottom: 0px;">
                            <input id="text-invite-email" type="email" name="uname" placeholder="Email" style="width: 100%"   />
                        </div>                          
                        <div id="fnameDiv" data-role="fieldcontain">  
                            <input id="text-invite-password" name="pass" type="password" placeholder="Password" style="width: 100%"   />
                        </div>
                        <div data-role="fieldcontain" style="border-bottom: 0px;">
                            Check the box below if you agree to our <a href="${model.props.appPath}/rentpad-terms-and-conditions" style="color:#369" target="_blank">terms & condtions</a> and <a href="${model.props.appPath}/rentpad-privacy-statement" style="color:#369" target="_blank">privacy statment</a> 
                            <label><input id="agree" type="checkbox" name="checkbox-0" />I agree</label>
                            
                            
                        </div>
                        
                        <table border="0" style="padding-bottom: 2px; padding-top: 10px; width: 100%; font-weight: normal; font-family: Century Gothic, Verdana;">
                            <tr>
                                <td align="center">
                                    <input type="hidden" name="s" value="1" />
                                    <input type="button" value="&nbsp;&nbsp;Submit&nbsp;&nbsp;" onclick="submitInviteForm()"/>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                
            </div>

            <div data-role="footer">
                <%@include file="footer_mobile.jsp" %>      
            </div>
            
        </div>
    </body>
</html>
